<template>
    <div class="modal-bg" v-show='showlogin'>
        <div class="modal-container">
          <img src="@/assets/close.png" class="close" @click="showlogreg(false)">
            <div class="placehold1"></div>
            <div class="modal-main">
                <div>
                  <Login v-if="logining"></Login>
                  <Register v-if="!logining"></Register>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <div class="shadow"></div>
        <div class="shadow"></div>
    </div>
</template>

<style>

div.modal-container {
  position: fixed;
    top: 3em;
    left: 32%;
    z-index: 2001;
    width: 30em;
    height: 500px;
    border-radius: 40px;
    color: black;
    text-align: center;

    background-color: rgb(255, 255, 255);
    background-image: url(..//assets/book.png);
    background-size: 10% 10%;
    background-repeat: no-repeat;
    background-position: 50% 20px;
}
img.close {
  width: 36px;
  height: 32px;
  position: relative;
  left: 36%;
  top: 40px;
  cursor:pointer
}
div.placehold1 {
    padding-top: 3em;
}
div.modal-main {
    /* margin-top: 1em; */
    width: 100%;
    height: 350px;
}
div.modal-footer {
    width: auto;
}
div.shadow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 2000;
}
</style>

<script>
import Login from "../components/LoginRegister/Login.vue";
import Register from "../components/LoginRegister/Register.vue";
import {mapState,mapMutations} from "vuex"
import Vue from "vue";

export default {
  name: "LoginRegister",
  components:{
    Login,
    Register
  },
  computed: {
    ...mapState('logreg',[
      'showlogin',
      'logining',
    ])
  },
  methods: {
    ...mapMutations('logreg',[
      'showlogreg',
      'setlogin'
    ])
  },

};
</script>
